<template>
  <a-modal
    title="关联分类"
    :visible="modalVisible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-button @click="selectCategoryId">新增分类</a-button>
    <a-table
      :columns="columns"
      rowKey="categoryId"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      style="margin-top: 16px"
    >
      <template slot="action" slot-scope="text, record">
        <a-popconfirm title="确定移除当前分类吗?" @confirm="() => deleteCategory(record)">
          <a>移除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-modal title="关联分类"
             :visible="categoryVisible"
             @ok="handleCategoryOk"
             @cancel="handleCategoryCancel">
      分类:
      <select-category :placeholder="'请选择商品分类'" ref="modal" style="width: 80%;margin-left: 16px"
                       v-model="categoryId"></select-category>
    </a-modal>
  </a-modal>
</template>
<script>
import selectCategory from '../../../components/compents/SelectCategory.vue'
import { getAction, postAction } from '../../../api/manage'

export default {
  components: { selectCategory },
  data() {
    return {
      record: {},
      modalVisible: false,
      categoryVisible: false,
      loading: false,
      brandId: '',
      confirmLoading: false,
      categoryId: '',
      columns: [{
        title: '序号',
        dataIndex: '',
        key: 'rowIndex',
        width: 60,
        align: 'center',
        customRender: function(t, r, index) {
          return parseInt(index) + 1
        }
      },
        {
          title: '品牌名',
          align: 'center',
          dataIndex: 'brandName'
        },
        {
          title: '分类名',
          align: 'center',
          dataIndex: 'categoryName'
        },
        {
          title: '操作',
          dataIndex: '',
          align: 'center',
          fixed: 'right',
          width: 220,
          scopedSlots: { customRender: 'action' }
        }],
      dataSource: [],
      pagination: {},
      url: {
        getCategoryById: '/product/category/getCategoryById',
        initRelationList: '/product/categoryBrandRelation/getRelationList',
        addRelation: '/product/categoryBrandRelation/addRelation'
      }
    }
  },
  methods: {
    /**
     * 初始化关联数据
     * @param record 品牌数据
     */
    initRelationList(record) {
      this.brandId = record.id
      getAction(this.url.initRelationList, { brandId: record.id }).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
          console.log(' this.dataSource', this.dataSource)
        } else {
          this.$message.error('获取关联分类数据失败！')
        }
      })
    },
    /**
     * 确认添加分类
     */
    handleCategoryOk() {
      let result = this.dataSource.find(item => item.categoryId == this.categoryId)
      if (result == undefined) {
        getAction(this.url.getCategoryById, { id: this.categoryId }).then(res => {
          if (res.success) {
            this.dataSource.push({
              brandName: this.record.name,
              categoryId: this.categoryId,
              brandId: this.brandId,
              categoryName: res.result.name,
              id: null
            })
            this.categoryVisible = false
          } else {
            this.$message.error('获取分类信息失败!')
          }
        })
      } else {
        this.$message.error('当前品牌已关联该分类!')
      }
    },
    /**
     * 移除分类
     * @param record 移除数据
     */
    deleteCategory(record) {
      this.dataSource = this.dataSource.filter(item => item.categoryId != record.categoryId)
    },
    /**
     * 确认提交
     */
    handleOk() {
      postAction(this.url.addRelation, this.dataSource).then(res => {
        if (res.success) {
          this.$message.success('关联分类成功！')
          this.modalVisible = false
        } else {
          this.$message.error('关联分类失败！')
        }
      })
    },
    /**
     * 确认取消
     */
    handleCancel() {
      this.modalVisible = false
    },
    /**
     * 关闭分类弹窗
     */
    handleCategoryCancel() {
      this.categoryVisible = false
    },
    /**
     * 打开分类弹窗
     */
    selectCategoryId() {
      this.categoryVisible = true
    }
  }
}

</script>
<style>

</style>